<template>
	<view class="container" v-if="isShowPhonePop">
		<u-popup :show="isShowPhonePop" round="10" @close="closePhonePop" mode="center">
			<u-form ref="form" labelPosition="left" :rules="rules" :model="formData" labelWidth="1">
				<view class="modal">
					<view class="modal-header">
						<text class="title">更换手机号码</text>
						<u-icon class="close-icon" name="close" size="20" @click="closePhonePop"></u-icon>
					</view>
					<view class="modal-body">
						<u-form-item class="" prop="oldPhone" key="oldPhone" class="margin-bottom-32">
							<view class="textarea-box">
								<u-input border="none" v-model="formData.oldPhone" placeholder="请输入旧手机号" />
							</view>
						</u-form-item>
						<u-form-item class="" prop="newPhone" key="newPhone" class="margin-bottom-32">
							<view class="textarea-box">
								<u-input border="none" v-model="formData.newPhone" placeholder="请输入新手机号" />
							</view>
						</u-form-item>
						<view class="verification ">
							<u-form-item class="" prop="verificationCode" key="verificationCode"
								class="margin-bottom-32">
								<view class="code-input">
									<u-input class="margin-bottom-32" border="none"
										v-model="formData.verificationCode" placeholder="请输入验证码" />
								</view>
								<u-button class="code-btn row-height" type="primary" color="#295EFF" :plain="true"
									:disabled="countdown > 0" @click="sendVerificationCode">
									{{ countdown > 0 ? `重新发送 (${countdown})` : '发送验证码' }}
								</u-button>
							</u-form-item>

						</view>
					</view>
					<u-button class="submit-btn row-height" color="#295FFF" type="primary" @click="submit">确定更改</u-button>
				</view>
			</u-form>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			isShowPhonePop: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				formData: {
					oldPhone: '',
					newPhone: '',
					verificationCode: '',
				},
				validateParams: {
					ticket: '',
					randStr: ''
				},
				rules: {
					oldPhone: [{
							required: true,
							message: '请输入旧手机号码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
					newPhone: [{
							required: true,
							message: '请输入新手机号码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
					verificationCode: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],

				},
				countdown: 0,
				oldPhoneError: false,
				newPhoneError: false,
				verificationError: false,
			};
		},
		methods: {
			closePhonePop() {
				this.$emit('closePhonePop')
			},
			validateOldPhone() {
				const phonePattern = /^[1][3-9][0-9]{9}$/;
				this.oldPhoneError = !phonePattern.test(this.oldPhone);
			},
			validateNewPhone() {
				const phonePattern = /^[1][3-9][0-9]{9}$/;
				this.newPhoneError = !phonePattern.test(this.newPhone);
			},

			async sendVerificationCode() {
				if (!this.formData.oldPhone) {
					uni.showToast({
						title: '请填写旧手机号',
						icon: 'none',
						duration: 1500
					})
					return
				}
				if (this.countdown > 0) return;
				const captcha = new TencentCaptcha('192481447', (res) => {
					if (res.ret !== 0) return;
					this.validateParams.ticket = res.ticket;
					this.validateParams.randStr = res.randstr;
					this.getSms();
				});
				captcha.show(); // 显示验证码

			},

			async getSms() {
				let orgId = await this.$utils.getOrgId(this)
				const params = {
					orgId: orgId,
					mobile: this.formData.oldPhone,
					type: 0,
					txCaptchaReq: {
						ticket: this.validateParams.ticket,
						randStr: this.validateParams.randStr
					}
				}
				const res = await this.$request(this.$Api.userSendSms, params, "post")
				console.log('res', res)
				this.countdown = 60;
				const interval = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) clearInterval(interval);
				}, 1000);
			},
			submit() {
				this.$refs.form.validate().then((valid) => {
					console.log(111);
					if (valid) {
						console.log(123)
						this.accountBindMobile()
					}
				}).catch((e)=>{});
			},

			async accountBindMobile() {
				let params = {
					userId: '',
					txCaptchaReq: this.validateParams,
					code: this.formData.verificationCode,
					mobile: this.formData.oldPhone,
					newMobile: this.formData.newPhone,
				}

				const res = await this.$request(this.$Api.accountBindMobile, params, "post")
				if (res.data.code == '200') {
					// 提交更改逻辑，根据实际需求实现
					uni.showToast({
						title: '更改成功',
						icon: 'none'
					});
					this.formData.newPhone = ''
					this.formData.verificationCode = ''
					this.$emit('getUserInfo')
				}else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}

			},
			closeModal() {
				// 关闭模态框逻辑，根据实际需求实现
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal {
		/* width: 80%; */
		width: calc(100vw - 100rpx);
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10px;
		padding: 32rpx 54rpx;
		// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.modal-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
	}

	.close-icon {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.input-box {
		border-radius: 12rpx;
	}

	.margin-bottom-32 {}

	.custom_item {
		margin-bottom: 32rpx;
	}



	.modal-body {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* margin-bottom: 32rpx; */
	}

	.row-height {
		/* height: 76rpx; */
	}

	.verification {
		display: flex;
		align-items: center;
	}

	.code-btn {
		width: 220rpx;
		font-size: 28rpx;
		color: #295EFF;
		border: 2rpx solid #295FFF;
	}

	.submit-btn {
		margin-top: 32rpx;
		width: 276rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
	}
	
	
	.textarea-box {
		width: 500rpx !important;
		padding: 10rpx;
		border-radius: 12rpx;
		border: 2rpx solid #dadbde;
		display: flex;
		justify-content: center;
	}
	
	.code-input {
		margin-right: 16rpx;
		width: 270rpx;
		border-radius: 12rpx;
		padding: 10rpx;
		border: 2rpx solid #dadbde;
		/* flex: 1; */
	}
</style>
